<script setup lang="ts">
import { watch } from "vue";
import { ref } from "vue";
import useOrder from "@/store/order";
import { storeToRefs } from "pinia";

const selected = ref<any>();
const num = ref<number>(1);
const popup_specs = ref();

const orderData = useOrder();
const { order } = storeToRefs(orderData);

defineExpose({
  open: () => {
    popup_specs.value.open();
  },
  close: () => {
    popup_specs.value.close();
  }
});

interface Good {
  info: any;
  sku: any[];
}
const props = withDefaults(defineProps<Good>(), {
  info: () => {},
  sku: () => []
});

const onCurrent = (info: any) => {
  if (selected.value?.code === info?.code) {
    return;
  }
  // 库存不足
  if (!info.stock) {
    uni.showToast({
      title: "无库存",
      icon: "none"
    });
    return;
  }
  selected.value = info;
  num.value = 1;
};

const goPaly = () => {
  if (!selected) {
    uni.showToast({
      title: "暂无库存",
      icon: "none"
    });
    return;
  }
  selected.value.num = num.value;
  order.value.orderInfo = props.info;
  order.value.orderInfo.specs = selected.value; //存储规格
  console.log("order.value.orderInfo", order.value.orderInfo);
  uni.navigateTo({
    url: "/pages/shop/index/order_create"
  });
};

watch(
  () => props.sku,
  newValue => {
    selected.value = newValue.find(item => item.stock > 0);
  }
);
</script>

<template>
  <uv-popup
    closeable
    ref="popup_specs"
    mode="bottom"
    custom-style="padding-bottom: 200rpx;"
    round="20px"
  >
    <view class="content">
      <view class="content_title">
        <uv-image
          class="content_title_img"
          radius="10px"
          :src="selected?.img_url"
          width="80px"
          height="80px"
        ></uv-image>
        <view class="m5_0">
          <view class="content_title_t1 priceFontB"
            >￥{{ selected?.price_format }}</view
          >
          <view class="content_title_t2 font14999">
            {{
              selected
                ? ` 已选 ${selected?.title}`
                : `共${sku?.length}可选，请选择`
            }}
          </view>
        </view>
      </view>
      <view class="content_body">
        <view class="title font14666">款型({{ sku.length }})</view>
        <view
          v-for="(item, index) in sku"
          :key="index"
          :class="[
            'content_body_item',
            { current: selected?.code === item?.code },
            { notcurrent: !item?.stock }
          ]"
          @click="onCurrent(item)"
        >
          <uv-image
            class="content_title_img"
            radius="10px"
            :src="item?.img_url"
            width="30px"
            height="30px"
            customStyle="float: left"
          ></uv-image>
          <view class="s_1 font14333"> {{ item.title }}</view>
        </view>
      </view>
      <view class="content-flex">
        <view class="font14666">数量</view>
        <uv-number-box
          :disabled="!selected"
          bgColor="#f9f9f9"
          :max="selected?.stock"
          v-model="num"
        ></uv-number-box>
      </view>
    </view>

    <view class="info_bottom">
      <view
        @click="goPaly"
        :class="['goPaly', { disable: selected?.stock === 0 }]"
        >立即购买</view
      >
    </view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.content-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 86px;
  left: 4%;
  right: 4%;
}
.content {
  padding: 20px 4%;

  .content_title {
    display: flex;
    // align-items: center;
  }

  .content_title_t1 {
    line-height: 45px;
  }

  .m5_0 {
    margin: 0 10px;
  }

  .title {
    padding: 20px 0;
  }

  .content_body {
    max-height: 50vh;
    overflow: auto;
  }

  .content_body_item {
    // display:flex;
    // align-items:center;
    // display: inline-block;
    display: flex;
    align-items: center;
    padding: 6px;
    background: #f9f9f9;
    border-radius: 5px;
    margin: 5px 0;
    margin-right: 20px;
    // line-height: 30px;
    // height: 30px;
    border: 1px solid #f9f9f9;
  }

  .content_title_img {
    float: left;
  }

  .s_1 {
    padding: 0 10px;
    float: left;
  }

  .current {
    border: 1px solid #ff4949;
  }
}

.info_bottom .goPaly.disable {
  background: rgba($color: #ff4949, $alpha: 0.6);
}
</style>
